<template>
  <div id="footerContainer">
    <transition name="fade" mode="out-in">
      <router-view></router-view>
    </transition>
    <footer>
      <mu-paper>
        <mu-bottom-nav :value="bottomNav" @change="handleChange">
          <mu-bottom-nav-item value="home" title="首页" icon="home"/>
          <mu-bottom-nav-item value="company" title="公司" icon="favorite"/>
          <mu-bottom-nav-item value="myself" title="我的" icon="location_on"/>
        </mu-bottom-nav>
      </mu-paper>
    </footer>
  </div>
</template>

<script>
  export default {
    name: 'footerContainer',
    data () {
      return {
        msg: 'footerContainer',
        bottomNav: 'home'
      }
    },
    methods:{//方法
      handleChange (val) {
        this.bottomNav = val
    		if(val == 'home'){
    			this.$router.push({
    				path:'/'
    			})
    		}else if(val == 'company'){
          this.$router.push({
            path:'/company'
          })
        }else if(val == 'myself'){
          this.$router.push({
            path:'/myself'
          })
        }
      }
    },
    computed:{//计算  引入vuex里的state数据

    },
    mounted(){//组件加载完执行
      
    },
    watch:{//监听数据，某数据改变时触发事件

    },
    components:{//引入组件
      
    },
    destroyed(){//离开组件

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
